<template>
	<main-content
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
	>
		<template slot="query">
			<el-form
				ref="queryForm"
				:inline="true"
				:model="queryData"
				class="flex-warp-container"
			>
				<el-form-item
					label="所属商户:"
					prop="merchantId"
					class="flex-row-container"
					label-width="77px"
				>
					<merchant-select
						v-model="queryData.merchantId"
						:placeholder="$t('common.select_all')"
					></merchant-select>
				</el-form-item>
				<el-form-item label="总代账号:" prop="topProxyName">
					<el-input
						v-model="queryData.topProxyName"
						v-input="{ name: 'symbols' }"
						:disabled="loading"
						clearable
						:placeholder="$t('common.please_enter')"
						size="medium"
					></el-input>
				</el-form-item>
				<el-form-item
					label="用户类型:"
					class="flex-row-container"
					label-width="77px"
				>
					<el-select
						v-model="queryData.userType"
						clearable
						:placeholder="$t('common.select_all')"
					>
						<el-option
							v-for="(item, index) in userTypeList"
							:key="index"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					label="白名单用户:"
					class="flex-row-container"
					label-width="90px"
				>
					<el-input
						v-model="queryData.userName"
						clearable
						:maxlength="11"
						v-input="{ name: 'symbols' }"
						size="medium"
						placeholder="请输入用户账号"
					></el-input>
				</el-form-item>
				<el-form-item
					label="创建人:"
					class="flex-row-container"
					label-width="77px"
				>
					<el-input
						v-model="queryData.createBy"
						v-input="{ name: 'symbols' }"
						clearable
						:maxlength="100"
						size="medium"
						placeholder="请输入创建人"
					></el-input>
				</el-form-item>
				<el-form-item label="创建时间:" prop="createdAt">
					<el-date-picker
						v-model="queryData.createdAt"
						type="datetimerange"
						range-separator="-"
						start-placeholder="开始时间"
						end-placeholder="结束时间"
						format="yyyy-MM-dd HH:mm:ss"
						:picker-options="pickerShortcut2"
						:default-time="defaultTime"
						value-format="timestamp"
						align="right"
						:clearable="false"
					></el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-button
						type="primary"
						icon="el-icon-search"
						:disabled="loading"
						size="medium"
						@click="search"
					>
						{{ $t('common.search') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-left"
						:disabled="loading"
						size="medium"
						@click="reset"
					>
						{{ $t('common.reset') }}
					</el-button>
					<el-button
						v-if="hasPermission('502031')"
						type="warning"
						icon="el-icon-plus"
						:disabled="loading"
						size="medium"
						@click="handleAdd"
					>
						{{ $t('common.add') }}
					</el-button>
				</el-form-item>
			</el-form>
		</template>
		<template slot="content">
			<el-table
				v-loading="loading"
				element-loading-spinner="el-icon-loading"
				border
				size="mini"
				class="small-size-table"
				:data="list"
				highlight-current-row
				:header-cell-style="getRowClass"
				:max-height="tableHeight"
			>
				<el-table-column
					type="index"
					:label="`${$t('dxn.game_rule.serial_number')}`"
					width="60"
					align="center"
				>
					<template slot-scope="scope">
						<span>
							{{
								getParentSerialNum({
									index: scope.$index,
									pageNum: pageNum,
									pageSize: pageSize
								})
							}}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="merchantName"
					align="center"
					label="所属商户"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span>{{ scope.row.merchantName || '-' }}</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="topProxyName"
					align="center"
					label="总代账号"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span>{{ scope.row.topProxyName || '-' }}</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="userType"
					align="center"
					label="用户类型"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span>
							{{ userTypeMap[scope.row.userType] || '-' }}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="userName"
					align="center"
					label="白名单用户"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span>{{ scope.row.userName || '-' }}</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="createdBy"
					align="center"
					label="创建人"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span>{{ scope.row.createdBy || '-' }}</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="createdAt"
					align="center"
					label="创建时间"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span>{{ scope.row.createdAt || '-' }}</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="remark"
					align="center"
					label="备注"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span>{{ scope.row.remark || '-' }}</span>
					</template>
				</el-table-column>
				<el-table-column align="center" label="操作">
					<template slot-scope="scope">
						<el-button
							type="danger"
							size="medium"
							@click="handleDel(scope.row)"
						>
							删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination
				:current-page.sync="pageNum"
				class="pageValue"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:page-size="pageSize"
				:page-sizes="pageSizes"
				:total="total"
				:pager-count="9"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			></el-pagination>
		</template>
		<el-dialog
			title="新增白名单"
			:visible.sync="dialogFormVisible"
			:destroy-on-close="true"
			width="500px"
			center
			@close="clear"
		>
			<el-form
				ref="formSub"
				:model="dialogForm"
				:rules="dataRule"
				label-width="100px"
				label-suffix=":"
			>
				<el-form-item
					label="所属商户"
					class="tagheight"
					prop="merchantId"
				>
					<merchant-select
						v-model="dialogForm.merchantId"
						:placeholder="$t('common.please_choose')"
						:merchantInfo.sync="merchantInfoA"
						@change="handleMerchantIdChange"
						class="input-class"
					></merchant-select>
				</el-form-item>
				<el-form-item label="总代账号" prop="topProxyName">
					<el-input
						v-model="dialogForm.topProxyName"
						v-input="{ name: 'symbols' }"
						clearable
						:maxlength="11"
						:placeholder="$t('common.please_enter')"
						size="medium"
						class="input-class"
					></el-input>
				</el-form-item>
				<el-form-item label="用户类型" prop="userType">
					<el-select
						v-model="dialogForm.userType"
						clearable
						placeholder="请选择用户类型"
						class="input-class"
					>
						<el-option
							v-for="(item, index) in selectUserTypeList"
							:key="index"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="白名单用户" prop="userName">
					<el-input
						v-model="dialogForm.userName"
						clearable
						:maxlength="11"
						v-input="{ name: 'symbols' }"
						size="medium"
						placeholder="请输入用户账号"
						class="input-class"
					></el-input>
				</el-form-item>
				<el-form-item label="备注信息" prop="remark">
					<el-input
						type="textarea"
						v-model="dialogForm.remark"
						v-input="{ name: 'symbols' }"
						clearable
						show-word-limit
						:maxlength="50"
						size="medium"
						placeholder="请输入备注"
						class="input-class"
					></el-input>
				</el-form-item>
				<div class="required">* 为必填项</div>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">
					取消
				</el-button>
				<el-button
					type="primary"
					:loading="loading"
					@click="subAddOrEidt"
				>
					确定
				</el-button>
			</div>
		</el-dialog>
	</main-content>
</template>

<script>
import { routerNames } from '@/utils/consts'
import list from '@/mixins/list'
import { mapGetters } from 'vuex'
import dayjs from 'dayjs'
import MainContent from '@/components/MainContent/index.vue'
const setSearchTime = () => [
	dayjs()
		.startOf('day')
		.subtract(1, 'd'),
	dayjs()
		.endOf('day')
		.subtract(1, 'd')
]
export default {
	name: routerNames.systemMaintainWhitelist,
	components: { MainContent },
	mixins: [list],
	data() {
		return {
			tableHeight: 480,
			otherDependenComponents: [],
			queryData: {
				merchantId: undefined,
				topProxyName: undefined,
				userType: undefined,
				userName: undefined,
				createBy: undefined,
				createdAt: setSearchTime()
			},
			dialogFormVisible: false,
			dialogForm: {
				merchantId: undefined,
				topProxyName: undefined,
				userType: undefined,
				userName: undefined,
				remark: undefined
			},
			userTypeList: [
				{
					description: '全部',
					code: undefined
				},
				{
					description: '会员',
					code: 0
				},
				{
					description: '代理',
					code: 1
				}
			],
			selectUserTypeList: [
				{
					description: '会员',
					code: 0
				},
				{
					description: '代理',
					code: 1
				}
			],
			merchantInfoA: {
				languages: 'zh_CN'
			},
			userTypeMap: {
				0: '会员',
				1: '代理'
			}
		}
	},
	computed: {
		...mapGetters(['merchantInfo']),
		merchantList() {
			return this.$store.getters.merchantList || []
		},
		dataRule() {
			return {
				merchantId: [
					{
						required: true,
						message: this.$t('operation.please_choose_merchant'),
						trigger: ['blur', 'change']
					}
				],
				topProxyName: [
					{
						required: true,
						message: '请输入总代账号',
						trigger: 'blur'
					},
					{
						min: 4,
						max: 11,
						message: '长度在 4 到 11 个字符',
						trigger: 'blur'
					}
				],
				userType: {
					required: true,
					message: '请选择用户类型',
					trigger: 'change'
				},
				userName: [
					{
						required: true,
						message: '请输入用户账号',
						trigger: 'blur'
					},
					{
						min: 4,
						max: 11,
						message: '长度在 4 到 11 个字符',
						trigger: 'blur'
					}
				],
				createBy: [
					{
						required: true,
						message: '请输入创建人',
						trigger: 'blur'
					},
					{
						min: 4,
						max: 11,
						message: '长度在 4 到 11 个字符',
						trigger: 'blur'
					}
				],
				remark: [
					{
						required: false,
						message: '请输入备注',
						trigger: 'blur'
					},
					{
						min: 0,
						max: 50,
						message: '最多可输入50个字符',
						trigger: 'blur'
					}
				]
			}
		}
	},
	mounted() {
		if (!this.$store.getters.isZk) {
			this.queryData.merchantId = this.$store.getters.merchantInfo.id
		}
		this.loadData()
	},
	methods: {
		// 改变列表条数
		handleSizeChange(value) {
			this.pageNum = 1
			this.pageSize = value
			this.loadData()
		},
		handleCurrentChange(value) {
			this.pageNum = value
			this.loadData()
		},
		search() {
			this.pageNum = 1
			this.loadData()
		},
		handleMerchantIdChange() {
			this.dialogForm.topProxyName = ''
			this.dialogForm.userType = ''
			this.dialogForm.userName = ''
			this.dialogForm.remark = ''
			this.$refs.formSub.clearValidate([
				'topProxyName',
				'userType',
				'userName',
				'remark'
			])
		},
		loadData() {
			const [startTime, endTime] = this.queryData.createdAt || []
			const params = {
				...this.getParams(this.queryData),
				createAtStart: startTime
					? dayjs(startTime).format('YYYY-MM-DD HH:mm:ss')
					: undefined,
				createAtEnd: endTime
					? dayjs(endTime).format('YYYY-MM-DD HH:mm:ss')
					: undefined
			}
			delete params.createdAt
			for (const k in params) {
				if (params[k] === '') {
					delete params[k]
				}
			}
			this.list = []
			this.loading = true
			this.$api
				.sysMaintenanceWhiteList(params)
				.then((res) => {
					const { record, totalRecord } = res.data || {}
					this.list = record || []
					this.total = totalRecord || 0

					this.loading = false
				})
				.catch(() => {
					this.loading = false
				})
		},
		reset() {
			this.queryData = {
				merchantId: undefined,
				topProxyName: undefined,
				userType: undefined,
				userName: undefined,
				createBy: undefined,
				createdAt: setSearchTime()
			}
			if (!this.$store.getters.isZk) {
				this.queryData.merchantId = this.$store.getters.merchantInfo.id
			}
			this.pageNum = 1
			this.loadData()
		},
		handleAdd() {
			this.dialogForm.topProxyName = ''
			this.dialogForm.userType = ''
			this.dialogForm.userName = ''
			this.dialogForm.remark = ''
			if (!this.$store.getters.isZk) {
				this.dialogForm.merchantId = this.$store.getters.merchantInfo.id
			} else {
				this.dialogForm.merchantId = undefined
			}
			this.dialogFormVisible = true
			this.$nextTick(() => {
				this.$refs.formSub.clearValidate()
			})
		},
		handleDel(val) {
			this.$confirm(
				`<strong>是否删除该总代下的白名单用户?</strong></br><strong style="color:#D9001B">一旦操作将会立即生效</strong>`,
				{
					dangerouslyUseHTMLString: true,
					confirmButtonText: this.$t('common.confirm'),
					cancelButtonText: this.$t('common.cancel'),
					type: 'warning',
					customClass: 'positionIcon'
				}
			)
				.then(() => {
					const params = {
						id: val.id
					}
					this.$api.sysMaintenanceWhiteDelete(params).then((res) => {
						if (res?.code === 200) {
							this.$message.success(
								this.$t('common.delete_success')
							)
							this.loadData()
						}
					})
				})
				.catch(() => {})
		},
		subAddOrEidt() {
			const params = this.dialogForm
			const target = this.merchantList.find(
				(item) => item.id === params.merchantId
			)
			if (target) {
				params.merchantName = target.merchantName
			}
			for (const k in params) {
				if (
					params[k] === '' ||
					(Array.isArray(params[k]) && !params[k].length)
				) {
					delete params[k]
				}
			}
			this.$refs.formSub.validate((valid) => {
				if (valid) {
					this.loading = true
					this.$api
						.sysMaintenanceWhiteAdd(params)
						.then((res) => {
							this.loading = false
							if (res?.code === 200) {
								this.$message.success(
									this.$t('common.action_success')
								)
								this.dialogFormVisible = false
								this.loadData()
							}
						})
						.catch((e) => {
							this.loading = false
						})
				}
			})
		},
		clear() {
			this.$refs.formSub.resetFields()
		}
	}
}
</script>

<style lang="scss" scoped>
.input-class {
	width: 300px;
}
.required {
	width: 400px;
	text-align: right;
}
</style>
